// 修改密码

<template>
  <view>
    <view class="title-box">修改密码</view>
    <!-- 输入框 -->
    <view class="input-box">
      <icon-input icon="icon-shouji" type="number" placeholder="请输入手机号" v-model="postForm.mobile"></icon-input>
      <icon-input icon="icon-yanzheng" placeholder="请输入验证码" v-model="postForm.captcha">
        <!-- <template v-slot:code> -->
        <template #code>
          <text class="code" @tap="getCode">{{ codeText }}</text>
        </template>
      </icon-input>
      <icon-input icon="icon-mima" type="password" placeholder="请输入新密码" v-model="postForm.newpassword"></icon-input>
      <icon-input icon="icon-mima" type="password" placeholder="请再次输入新密码" v-model="newPassword"></icon-input>
      <view class="input-tip">* 请输入6-12位密码，包含字母、数字以及特殊符号</view>
    </view>
    <!-- 按钮 -->
    <view class="btn-box" @tap="confirm">确定</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      postForm: {
        type: 'mobile',
        mobile: '',
        captcha: '',
        newpassword: ''
      },
      newPassword: '',
      codeText: '获取短信验证码',
      codeFlag: true
    }
  },
  methods: {
    // 获取短信验证码
    async getCode() {
      if (!this.codeFlag) return
      if (!this.postForm.mobile) {
        return uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        })
      }
      const res = await this.$http.post('/api/kuerp/order/sms/send', { mobile: this.postForm.mobile, event: 'resetpwd' })
      if (res.code == 200) {
        uni.showToast({
          title: '发送成功',
          icon: 'none'
        })
        this.codeFlag = false
        let count = 60
        let countDown = () => {
          count--
          this.codeText = count + '秒后重新获取'
          if (count === 0) {
            clearInterval(timer)
            this.codeFlag = true
            this.codeText = '获取短信验证码'
          }
        }
        countDown()
        const timer = setInterval(() => {
          countDown()
        }, 1000)
      }
    },
    // 确定
    async confirm() {
      if (!this.postForm.mobile) {
        return uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        })
      }

      if (!this.postForm.captcha) {
        return uni.showToast({
          title: '请输入短信验证码',
          icon: 'none'
        })
      }

      if (!this.postForm.newpassword) {
        return uni.showToast({
          title: '请输入新密码',
          icon: 'none'
        })
      }

      if (!this.newPassword) {
        return uni.showToast({
          title: '请再次输入新密码',
          icon: 'none'
        })
      }

      if (this.postForm.newpassword !== this.newPassword) {
        return uni.showToast({
          title: '两次密码输入不一致',
          icon: 'none'
        })
      }

      const res = await this.$http.post('/api/kuerp/order/user/resetpwd', this.postForm)
      if (res.code == 200) {
        uni.showToast({
          title: '修改成功',
          icon: 'success',
          mask: true
        })
        setTimeout(async () => {
          uni.navigateBack({ delta: 1 })
        }, 1000)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.title-box {
  margin: 80rpx 60rpx 52rpx;
  font-size: 40rpx;
  font-weight: 600;
  color: #111111;
}

// 输入框
.input-box {
  .code {
    font-size: 32rpx;
    color: #fe492f;
  }
  .input-tip {
    margin-top: 20rpx;
    padding-left: 60rpx;
    font-size: 24rpx;
    color: #999999;
  }
}

// 按钮
.btn-box {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 80rpx auto 0;
  width: 630rpx;
  height: 80rpx;
  border-radius: 50rpx;
  font-size: 36rpx;
  font-weight: 500;
  color: #ffffff;
  background: #fe492f;
}
</style>

